<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小星星的守护助手 - Luke's BabyCare</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="container">
        <header>
            <h1>小星星的守护助手</h1>
            <p class="subtitle">Luke's BabyCare</p>
        </header>

        <main>
            <!-- Tab导航 -->
            <div class="tabs">
                <button class="tab-button active" data-tab="feeding">喂养时间管理</button>
                <button class="tab-button" data-tab="events">宝宝成长事件</button>
                <button class="tab-button" data-tab="market">行情查询</button>
                <button class="tab-button" data-tab="config">参数设置</button>
            </div>

            <!-- 喂养管理模块 -->
            <section id="feeding-tab" class="tab-content active">
                <div class="content-layout">
                    <div class="form-section">
                        <div class="feeding-status">
                            <div class="next-feeding">
                                <h3>下次喂养提醒</h3>
                                <p id="nextFeedingTime">加载中...</p>
                                <p id="feedingMessage">正在计算...</p>
                                <button id="refreshFeedingBtn" class="btn-refresh">刷新</button>
                            </div>
                            
                            <div class="quick-record">
                                <button id="quickRecordBtn" class="btn-primary">快速记录当前喂养</button>
                            </div>
                        </div>

                        <div class="feeding-form">
                            <h3>手动记录喂养</h3>
                            <form id="feedingForm">
                                <div class="form-group">
                                    <label for="feedingTime">喂养时间:</label>
                                    <input type="datetime-local" id="feedingTime" required>
                                </div>
                                <div class="form-group">
                                    <label for="feedingType">喂养类型:</label>
                                    <select id="feedingType">
                                        <option value="亲喂">亲喂</option>
                                        <option value="瓶喂" selected>瓶喂</option>
                                        <option value="奶粉">奶粉</option>
                                        <option value="辅食">辅食</option>
                                        <option value="AD">AD</option>
                                        <option value="益生菌">益生菌</option>
                                        <option value="水">水</option>
                                        <option value="零食">零食</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="feedingAmount">分量:</label>
                                    <input type="text" id="feedingAmount" placeholder="例如: 120ml" value="120ml">
                                </div>
                                <div class="form-group">
                                    <label for="feedingNote">备注 (可选):</label>
                                    <input type="text" id="feedingNote" placeholder="例如: 宝宝今天吃得特别好">
                                </div>
                                <button type="submit" class="btn-secondary">记录喂养</button>
                            </form>
                        </div>
                    </div>

                    <div class="timeline-section">
                        <div class="timeline-header">
                            <h3>喂养时间轴</h3>
                            <div class="filter-controls">
                                <label for="feedingHoursFilter">时间筛选:</label>
                                <select id="feedingHoursFilter">
                                    <option value="48" selected>最近48小时</option>
                                    <option value="24">最近24小时</option>
                                    <option value="12">最近12小时</option>
                                    <option value="0">全部记录</option>
                                </select>
                            </div>
                        </div>
                        <ul id="feedingRecordsList" class="timeline"></ul>
                    </div>
                </div>
            </section>

            <!-- 成长事件模块 -->
            <section id="events-tab" class="tab-content">
                <div class="content-layout">
                    <div class="form-section">
                        <div class="event-form">
                            <h3>添加新事件</h3>
                            <form id="eventForm">
                                <div class="form-group">
                                    <label for="eventDate">事件日期:</label>
                                    <input type="date" id="eventDate" required>
                                </div>
                                <div class="form-group">
                                    <label for="eventContent">事件内容:</label>
                                    <textarea id="eventContent" placeholder="例如: 第一次微笑、翻身等" required></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="eventCategory">事件类型:</label>
                                    <select id="eventCategory">
                                        <option value="health">健康</option>
                                        <option value="development">发育</option>
                                        <option value="fun">趣事</option>
                                        <option value="family">家庭</option>
                                        <option value="activity">活动</option>
                                        <option value="general">其他</option>
                                    </select>
                                </div>
                                <button type="submit" class="btn-primary">添加事件</button>
                            </form>
                        </div>
                    </div>

                    <div class="timeline-section">
                        <div class="timeline-header">
                            <h3>事件时间轴</h3>
                            <div class="filter-controls">
                                <label for="eventsDaysFilter">时间筛选:</label>
                                <select id="eventsDaysFilter">
                                    <option value="2" selected>最近2天</option>
                                    <option value="7">最近7天</option>
                                    <option value="30">最近30天</option>
                                    <option value="0">全部事件</option>
                                </select>
                            </div>
                        </div>
                        <ul id="eventsTimeline" class="timeline"></ul>
                    </div>
                </div>
            </section>

            <!-- 行情查询模块 -->
            <section id="market-tab" class="tab-content">
                <div class="content-layout">
                    <div class="form-section">
                        <div class="market-info">
                            <h3>黄金价格查询</h3>
                            <p>切换到此页面时会自动获取最新黄金价格信息</p>
                            <button id="fetchGoldPricesBtn" class="btn-primary">刷新价格</button>
                            <a href="https://www.huilvbiao.com/gold" target="_blank" class="btn-secondary" style="margin-left: 10px; text-decoration: none;">数据源</a>
                        </div>

                        <div class="market-links">
                            <div class="market-category">
                                <h3>汇率栏目</h3>
                                <a href="https://www.huilvbiao.com/" target="_blank" class="btn-secondary market-link-btn">人民币汇率</a>
                            </div>

                            <div class="market-category">
                                <h3>资讯栏目</h3>
                                <a href="https://stockapp.finance.qq.com/mstats/" target="_blank" class="btn-secondary market-link-btn">腾讯行情</a>
                                <a href="https://www.eastmoney.com/" target="_blank" class="btn-secondary market-link-btn">东财门户</a>
                                <a href="https://news.10jqka.com.cn/realtimenews.html" target="_blank" class="btn-secondary market-link-btn">同花顺 7*24小时财经直播</a>
                                <a href="https://xueqiu.com/" target="_blank" class="btn-secondary market-link-btn">雪球网</a>
                            </div>
                        </div>
                    </div>

                    <div class="timeline-section">
                        <div class="timeline-header">
                            <h3>黄金价格信息</h3>
                        </div>
                        <div id="goldPricesContainer">
                            <p>正在获取数据...</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 参数设置模块 -->
            <section id="config-tab" class="tab-content">
                <div class="config-section">
                    <h3>参数设置</h3>
                    <form id="configForm">
                        <div class="form-group">
                            <label for="feedingInterval">喂养间隔（小时）:</label>
                            <input type="number" id="feedingInterval" step="0.1" min="0.5" max="12" value="3.5">
                        </div>
                        <div class="form-group">
                            <label for="defaultFeedingType">默认喂养类型:</label>
                            <select id="defaultFeedingType">
                                <option value="亲喂">亲喂</option>
                                <option value="瓶喂" selected>瓶喂</option>
                                <option value="奶粉">奶粉</option>
                                <option value="辅食">辅食</option>
                                <option value="AD">AD</option>
                                <option value="益生菌">益生菌</option>
                                <option value="水">水</option>
                                <option value="零食">零食</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="defaultFeedingAmount">默认分量:</label>
                            <input type="text" id="defaultFeedingAmount" value="120ml">
                        </div>
                        <button type="submit" class="btn-secondary">保存配置</button>
                    </form>
                </div>
            </section>
        </main>

        <footer>
            <p>Tab标签 作者：伊玛目的门徒（luke）；联系方式：luul11@163.com</p>
            <p id="versionInfo">版本号：V1.5.0</p>
            <p>&copy; 2025 小星星的守护助手 - Luke's BabyCare</p>
        </footer>
    </div>

    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>